<template>
  <div>
    <h2>小王的工资为：{{ num1 }}</h2>
    <button @click="salary(300)">小王涨300</button>
    <h2>小张的工资为：{{ num2 }}</h2>
    <button @click="salary(500)">小张涨500</button>
    <div :class="{ active: true }">班级总收入:{{sum}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10000,
      num2: 5000,
    }
  },
  methods: {
    salary(money) {
      if (money === 300) {
        this.num1 += 300
      } else {
        this.num2 += 500
      }
    },
  },
  computed:{
    sum(){
       return this.num1+this.num2
    }
  }
}
</script>

<style>
.active {
  width: 300px;
  height: 100px;
  background-color: pink;
  border-radius: 50px;
  text-align: left;
  line-height: 100px;
}
</style>